<template>
  <div class="container">
    <canvas ref="canvasRef" width="40" height="90"></canvas>
    <div v-if="position == 'lower'" class="flc_message">{{ message }}</div>
    <div v-else-if="position == 'left'" class="flc_message2">{{ message }}</div>
    <div v-else class="flc_message3">{{ message }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps, watch } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
let centerX = 0
const canvasRef = ref(null)

const props = defineProps({
  centre: {
    type: Number,
    default: 50
  },
  direction: {
    type: Boolean,
    default: false //如果是true，则朝左
  },
  step: {
    type: Number,
    default: 0.2
  },
  message: {
    type: String,
    default: 'L FLPRN'
  },
  position: {
    type: String,
    default: 'lower' //文字的位置，默认是在下方
  }
})

let execute = true

// 监听 Vuex 状态变化
watch(
  () => store.state.flt.rollAngle, // 监听 Vuex 中的状态
  (newValue, oldValue) => {
    if (newValue != oldValue && props.message != 'L ELEV' && props.message != 'R ELEV') {
      const canvas = canvasRef.value
      let params = 0
      const lower = 100 - props.centre - 10
      const upper = props.centre - 10
      if (props.message.substring(0, 1) == 'L') {
        if (newValue > 50) {
          params = lower + (upper * (newValue - 50)) / 50 + 10
        } else {
          params = (newValue / 50) * lower + 10
        }
        params = 100 - params
      } else {
        if (newValue > 50) {
          params = lower + 10 - ((newValue - 50) * lower) / 50
        } else {
          params = lower + 10 + upper - (newValue / 50) * upper
        }
        params = 100 - params
      }
      if (canvas.getContext && execute) {
        const ctx = canvas.getContext('2d')
        centerX = props.direction ? canvas.width * 0.6 : canvas.width * 0.4
        drawCanvas(ctx, canvas.width, canvas.height)
        drawIndex(ctx, canvas.width, canvas.height, params)
      }
    }
  }
)

watch(
  () => store.state.flt.elevAngle,
  (newValue, oldValue) => {
    if ((newValue != oldValue && props.message == 'L ELEV') || props.message == 'R ELEV') {
      const canvas = canvasRef.value
      if (canvas.getContext && execute) {
        const ctx = canvas.getContext('2d')
        centerX = props.direction ? canvas.width * 0.6 : canvas.width * 0.4
        drawCanvas(ctx, canvas.width, canvas.height)
        drawIndex(ctx, canvas.width, canvas.height, newValue)
      }
    }
  }
)

const changeIndex = (params) => {
  const canvas = canvasRef.value
  if (canvas.getContext && execute) {
    const ctx = canvas.getContext('2d')
    centerX = props.direction ? canvas.width * 0.6 : canvas.width * 0.4
    drawCanvas(ctx, canvas.width, canvas.height)
    drawIndex(ctx, canvas.width, canvas.height)
    // 递归调用，更新下一帧
    if (params >= 10 || params <= 90) {
      requestAnimationFrame(() => changeIndex(params))
    } else {
      return
    }
  }
}

const drawIndex = (ctx, width, height, newValue) => {
  ctx.beginPath()
  if (props.direction) {
    ctx.moveTo(centerX, (height * newValue) / 100)
    ctx.lineTo(
      centerX - 15 * Math.cos(Math.PI / 12),
      (height * newValue) / 100 - 15 * Math.sin(Math.PI / 12)
    )
    ctx.lineTo(
      centerX - 15 * Math.cos(Math.PI / 12),
      (height * newValue) / 100 + 15 * Math.sin(Math.PI / 12)
    )
  } else {
    ctx.moveTo(centerX, (height * newValue) / 100)
    ctx.lineTo(
      centerX + 15 * Math.cos(Math.PI / 12),
      (height * newValue) / 100 - 15 * Math.sin(Math.PI / 12)
    )
    ctx.lineTo(
      centerX + 15 * Math.cos(Math.PI / 12),
      (height * newValue) / 100 + 15 * Math.sin(Math.PI / 12)
    )
  }
  ctx.fillStyle = 'white'
  ctx.fill()
  ctx.closePath()
}

onMounted(() => {
  const canvas = canvasRef.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    centerX = props.direction ? canvas.width * 0.6 : canvas.width * 0.4
    drawCanvas(ctx, canvas.width, canvas.height)
    const newValue = props.centre
    drawIndex(ctx, canvas.width, canvas.height, newValue)
  }
})

const drawCanvas = (ctx, width, height) => {
  ctx.clearRect(0, 0, width, height)
  ctx.beginPath()
  ctx.moveTo(centerX, height * 0.1)
  ctx.lineTo(centerX, height * 0.9)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX - 4, height * 0.1)
  ctx.lineTo(centerX + 4, height * 0.1)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX - 4, height * 0.9)
  ctx.lineTo(centerX + 4, height * 0.9)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX - 4, (height * props.centre) / 100)
  ctx.lineTo(centerX + 4, (height * props.centre) / 100)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.closePath()
}
</script>

<style scoped>
.container {
  position: relative; /* 必须设置定位，确保其显示在背景图片上方 */
  width: 40px;
  height: 90px;
  z-index: 10; /* 保证该元素位于背景图片的上层 */
  background-color: rgb(0, 0, 0);
}
.flc_message {
  width: 80px;
  margin-left: -20px;
  text-align: center;
  color: rgb(8, 214, 255);
  font-weight: 600;
  white-space: nowrap; /* 防止换行 */
}
.flc_message2 {
  position: relative;
  width: 80px;
  text-align: center;
  color: rgb(8, 214, 255);
  top: -40px;
  left: -70px;
  font-weight: 600;
  white-space: nowrap; /* 防止换行 */
}
.flc_message3 {
  width: 80px;
  text-align: center;
  color: rgb(8, 214, 255);
  top: -40px;
  left: 30px;
  font-weight: 600;
  position: relative;
  white-space: nowrap; /* 防止换行 */
}
</style>
